<template>
    <div class="qrcode-container">
        <div v-if="qrCodeUrl" class="qrcode-preview">
            <img :src="qrCodeUrl" />
        </div>
    </div>
</template>

<script>
import QRCode from 'qrcode'
const { ipcRenderer } = window.require('electron')

export default {
    name: 'QRCodeGenerator',
    data() {
        return {
            text: '',
            qrCodeUrl: ''
        }
    },
    methods: {
        async generateQRCode(text) {
            this.text = text;
            if (!this.text) {
                alert('请输入要生成二维码的内容')
                return
            }

            try {
                this.qrCodeUrl = await QRCode.toDataURL(this.text, {
                    width: 180,
                    margin: 2,
                    color: {
                        dark: '#000000',
                        light: '#ffffff'
                    }
                })
            } catch (err) {
                console.error(err)
                alert('生成二维码失败')
            }
        },
    }
}
</script>

<style scoped>
.qrcode-container {
    width: 100%;
    height: 100%;
    text-align: center;
}

input {
    padding: 8px;
    width: 300px;
    margin: 10px;
}

button {
    padding: 8px 16px;
    background: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
}

.qrcode-preview {}

.qrcode-preview img {
    border: 1px solid #ddd;
    display: block;
    background: white;
}
</style>